<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/common.css">
    <link red="stylesheet" href="./css/header.css">
    <link rel="stylesheet" href="./css/footer.css">
    <link rel="stylesheet" href="./lib/轮播插件/styles/slider.css">
    <link rel="stylesheet" href="./css/moudule.css">
    <link rel="stylesheet" href="./css/magnifying.css">
    <link rel="stylesheet" href="./css/product_details.css">
    <script src="./lib/轮播插件/javascripts/jquery-1.11.0.js"></script>
    <script src="./js/magnifying.js"></script>
    
    <script src="./js/product.detalis.js"></script>
   
</head>
<body>
     <!-- 这是头部区域开始 -->
   <div class="box" >
    <div class="header">
        <!-- 这是头部上面区域 -->
       <div class="wrapper header_div1 clearfix">
           <div class="header_content fr">欢迎光临
               <span>乐购，</span>&nbsp;
               请&nbsp; 登陆\
               <span>注册</span>
           </div>
       </div>
   </div>
         <!-- 这是头部下面区域 -->
         <div class="header_div2 wrapper clearfix ">
           <form action="#" class="  f1">
              <input type="text"><button></button>               
          </form>

          <div class="span_div fr "> <a href="#">购物车&nbsp;3</a><a href="#">我的订单</a></div>
         
      </div>

      <div class="header_div3  clearfix wrapper" >
      <ul >
        <li><a href="./index.html" target="_blank">图书</a></li>
           <li><a href="#" >电子书</a></li>
           <li><a href="./product_list.html" target="_blank">原创文学</a></li>
           <li><a href="./product_detalis.html" target="_blank">服装</a></li>
           <li><a href="./register.html" target="_blank">户外运动</a></li>
           <li><a href="./Shopping.html" target="_blank">电子书</a></li>
         <li><a href="">电子书</a></li>
         <li><a href="">电子书</a></li>
         <li><a href="">电子书</a></li>
         <li><a href="">电子书</a></li>
         <li><a href="">电子书</a></li>
         
         <li><a href="">电子书</a></li>
      </ul>
      <img src="./imags/logo.jpg" alt="">
      </div>
     
   </div>
   <!-- 这是头部区域结束 -->
         
   <!-- 这是图书添加购物车区域开始 -->
  
   <div class="shppingche">
       <div class="wrapper">
        <div class="shppingche_top">  
        <span>图书</span>
            <a href="">&gt;博集天地</a>
            <a href="">&gt;博集天地</a>
            <a href="">&gt;博集天地</a>
            <a href="">&gt;博集天地</a>
        </div>
         <div class="shppingche_bottom clearfix">
         <!-- 这是左边区域 -->
        <div class="shppingche_bottom_left f1">




            <div class="wai">
                <div class="one">
                <img src="./img/2.jpg" />
                
                <span></span>
            </div>
            <div class="two">
                <img  class="active" src="./img/11.jpg"/>
                <img src="./img/22.jpg" />
                <img src="./img/33.jpg" />			
            </div>
            </div>
            
            
            <div class="the">
                <img src="./img/111.jpg" />
            </div>
            
            <!-- <div class="div1">
            <img src="./imags/4444.jpg" alt="">
           </div> -->
            <!-- 这是左边区域的下面区域 -->
<!--            
            <div class="div2">
             <i><img src="./imags/arrow-left.png" alt=""></i>
             <i> <img src="./imags/arrow-right.png" alt=""></i>
            <ul class="clearfix">
            <li><img src="./imags/4444.jpg" alt=""></li>
            <li><img src="./imags/4444.jpg" alt=""></li>
                </ul>
            </div> -->
             <h6 style="clear: both;"></h6>

            <p>商品编号：11950959</p>
        </div>
     <!-- 这是左边区域的结束 -->

     <!-- 这是右边区域开始 -->
        <div class="shppingche_bottom__right fr">
        <div class="shppingche_bottom__right_div1">
            <h3>她和他</h3>
            <p>《偷影子的人》作者马克·李维重磅新作，法国连续60周在榜，销量突破120万册</p>
            <p>[法] 马克·李维 著；杨亦雨 译</p>
        </div>
         <div class="shppingche_bottom__right_div2">
        <p> 
            乐 购 价：<span>￥26.20</span> [6.9折] [定价：￥38.00] (降价通知)
        
        </p>
        <p>促销信息： <span>满减 每满150.00元，可减50.00元现金</span>   详情>>
           
        </p>
        <p>
            <span>领 券：</span><i>100-6</i><i>100-6</i>
        </p>
       </div>   

        <div class="shppingche_bottom__right_div3">
            种类选择：<span>平装版</span><span>精装版</span>
        </div>
        <div class="shppingche_bottom__right_div4 clearfix">
            <div class="left f1">
         <span>
         1   
         </span>
        <span>+</span><span>-</span>
        </div>

        <button class="f1">加入购物车</button>
        </div>

        <div class="shppingche_bottom__right_div5"> "温馨提示：支持7天无理由退货"</div>
        </div>

        </div>
       </div>
   </div>
   <!-- 这是图书添加购物车区域结束 -->
       

     <!-- 这是人气单品区域开始 -->
     <div class="wrapper discount">
        <h2><span>人气单品</span></h2>
        <ul class="discount_ul1  clearfix">
            <li >
                <div><img src="./imags/2222.jpg" alt=""></div>
               <i><img src="./imags/limitTime.jpg" alt=""></i>
                <P>白夜行  东野上吾</P>
                <P>推荐：<span>★★★★★</span></P>
                <P> ￥:38<span>￥:58</span></P>
            </li>
            <li >
               <div><img src="./imags/2222.jpg" alt=""></div>
              <i><img src="./imags/limitTime.jpg" alt=""></i>
               <P>白夜行  东野上吾</P>
               <P>推荐：<span>★★★★★</span></P>
               <P> ￥:38<span>￥:58</span></P>
           </li>
           <li >
               <div><img src="./imags/2222.jpg" alt=""></div>
              <i><img src="./imags/limitTime.jpg" alt=""></i>
               <P>白夜行  东野上吾</P>
               <P>推荐：<span>★★★★★</span></P>
               <P> ￥:38<span>￥:58</span></P>
           </li>
           <li >
               <div><img src="./imags/2222.jpg" alt=""></div>
              <i><img src="./imags/limitTime.jpg" alt=""></i>
               <P>白夜行  东野上吾</P>
               <P>推荐：<span>★★★★★</span></P>
               <P> ￥:38<span>￥:58</span></P>
           </li>
           <li >
               <div><img src="./imags/2222.jpg" alt=""></div>
              <i><img src="./imags/limitTime.jpg" alt=""></i>
               <P>白夜行  东野上吾</P>
               <P>推荐：<span>★★★★★</span></P>
               <P> ￥:38<span>￥:58</span></P>
           </li>
         
        </ul>
    </div>
     <!-- 这是人气单品区域的结束 -->

<!-- 这是看了又看 商品评价区域的开始 -->
     <div class="wrapper evaluate">
    
        <div class="wrapper evaluate_wrapper clearfix">
           <div class="evaluate_wrapper_left f1">
            <h2 class=""><span>人气单品</span></h2>
            <ul class="discount_ul1  clearfix " >
               
             <script>
                 for(let i=0;i<7;i++){
                     document.write(` <li >
                    <div><img src="./imags/2222.jpg" alt=""></div>
                   <i><img src="./imags/limitTime.jpg" alt=""></i>
                    <P>白夜行  东野上吾</P>
                    <P>推荐：<span>★★★★★</span></P>
                    <P> ￥:38<span>￥:58</span></P>
                </li>`)
                 }
             </script>
             
            </ul>
           </div>
           <!-- 这是右边区域 -->
            <div class="fr evaluate_wrapper_right">
             <h3><span class="bgc">商品介绍</span> <span>评价(9999)</span></h3>
             <!-- 这是右边的图片区域 -->
             <div class="evaluate_wrapper_right_imgdiv yinsen show">
              <img src="./imags/03-产品详情-B.jpg" alt="">
             </div>
                <!-- 这是切换界面 -->
             <div class="evaluate_wrapper_right_reputation  yinsen">
                  <img src="./imags/03-产品详情-A_03.jpg" alt="">
                  <div class="icons"><span>全部评价(9999)</span><span>好评(1)</span><span>中评(1)</span><span>差评(9998)</span></div>
                  <ul>
                    <script>
                        for(let i=0;i<12;i++){
                            document.write(`
                            <li class="clearfix"> 
                        <div class="div1 f1">
                            <p>★★★★★</p>
                            <p>下单五天后评论</p>
                            <p>2021-05-17</p>
                    </div> 
                    <div class="div2 f1">书的质量不错，很新，一点放久的潮味或臭味都没有，内容也值得一看，关
                        键是价格真给力</div>
                    <div class="div3 fr" >
                      <p>  <img src="./imags/04-产品详情页面_01_03.png">洲**子</p>
                      <p>金牌会员</p>
                      <p>来自iPhone客户端</p>
                    </div>
                </li>
                            `)
                        }
                    </script>
                  </ul>
               <p id="cut"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>......</span><span>下一页</span></p>
             </div>
             </div>
            </div>

        </div>

<!-- 这是看了又看 商品评价区域的结束 -->
  <!-- 这是纯图标区域 -->
  <div class="image wrapper" style="margin-top: 88px;"> <img src="./imags/1111.png" alt=""></div>
  <div class="serve">
    <div class="wrapper serve_div1">
       
        <div><img src="./imags/222_11.png" alt=""></div>
        <div><img src="./imags/222_13.png" alt=""></div>
        <div><img src="./imags/222_15.png" alt=""></div>
        <div><img src="./imags/222_17.png" alt=""></div>
   
    </div>
</div>
         <!-- 这是footer区域开始 --> 
        
         <div class="footer">
            <!-- 这是footer的上边区域 -->
            <div class="wrapper footer_div1 clearfix">
                <ul>
                    <li>
                        <h2>购物指南</h2>
                    </li>
                    <li>购物流程</li>
                    <li>购物流程</li>
                    <li>购物流程</li>
                    <li>购物流程</li>
                </ul>
                <ul>
                 <li>
                     <h2>购物指南</h2>
                 </li>
                 <li>购物流程</li>
                 <li>购物流程</li>
                 <li>购物流程</li>
                 <li>购物流程</li> 
             </ul>
             <ul>
                 <li>
                     <h2>购物指南</h2>
                 </li>
                 <li>订单配送查询</li>
                 <li>订单配送查询</li>
                 <li>订单配送查询</li>
                 <li>订单配送查询</li>
             </ul>
             <ul>
                 <li>
                     <h2>购物指南</h2>
                 </li>
                 <li>自助申请退换货</li>
                 <li>自助申请退换货</li>
                 <li>自助申请退换货</li>
                 <li>自助申请退换货</li>
             </ul>
             <ul>
                 <li>
                     <h2>购物指南</h2>
                 </li>
                 <li>购物流程</li>
                 <li>购物流程</li>
                 <li>购物流程</li>
                 <li>购物流程</li> 
             </ul>
             <div class=" fr footer_logo"><img src="./imags/logo_00.png" alt="加载失败"></div>
            </div>

   <div class="wrapper footer_div2">  
       <p><span>公司简介  &nbsp;|</span> <span>Investor Relations   &nbsp;|</span>   <span>机构销售 &nbsp; |</span> 
         <span>机构销售 &nbsp; |</span>
         <span>机构销售 &nbsp; |</span>
         <span>机构销售  &nbsp;|</span>
         <span>机构销售 &nbsp; |</span>  
         <span>机构销售  &nbsp;|</span></p>
        
       <p>Copyright &copy; 乐购网 2004-2016, All Rights Reserved</p>
   </div>
      </div>
    
      
</body>
</html>